<template>
    <div class="text" v-bind:class="{ box: isbox, border: isborder }">
      <div :class="{ inner: isinner }">春夏</div>
      <div :class="classobj">秋冬</div>
      <div :class="classmeal">三餐四季</div>
  
      <button @click="isbox = !isbox">切换</button>
    </div>
  </template>
  <script setup>
  import { computed } from "vue";
  const classobj = {
    inner: true,
    border: true
  };
  // const classMeal = computed(() => ({
  //   meal: isMeal.value
  // }));
  const classmeal = computed(() => ({
    meal: ismeal.value
  }));
  const ismeal = ref(true);
  import { ref } from "vue";
  const isbox = ref(false);
  const isborder = ref(true);
  const isinner = ref(true);
  </script>
  <style>
  .text {
    line-height: 30px;
    text-align: center;
  }
  .box {
    width: 100%;
    height: 100%;
    background-color: red;
  }
  .inner {
    margin: 2px;
    width: 50%;
    height: 50%;
    background-color: aquamarine;
    border: 2px solid rgb(241, 213, 4);
  }
  .border {
    border: 1px solid rgb(232, 12, 78);
  }
  .meal {
    background-color: rgb(15, 165, 126);
  }
  </style>
  